太想要放梗圖ㄌ.....
this = 這個。
如果對this的理解到這裡,很棒 您跟我一樣完全看不懂this呢!
接下來就從豬腦浸豬籠ㄉ角度來看 this是啥米吧...
關於 this的資訊會分成4-5篇用對我來說最簡單方式去理解&介紹,分別是:
Day [1] — this:存在於物件 = 主要講指向 instance(物件實體)
Day [2] — this:作用域 = 主要講 this 和作用域的關係
Day [3] — this:建構物件 = 主要講 this 和 new
Day [4] — this:指定物件 = 主要講 this 和 .call() / .apply() / .bind()
Day [5] — this:可能總結一下還沒想好
當 this 在函數運行的時候自動指向 instance(物件實體) 的屬性。
這時候應該已經有人想說 instance(物件實體) 是啥了,反正我還要寫30天,請期待一下後續的文章謝謝。
//來個範例吧!
var a = 123;
function jaygu() {
console.log(this.a);
}
jaygu(); // 123
客倌且慢,我們再往下看:
//來個範例吧!
function jaygu(){
console.log(this.a);
}
//jaygu 函式會運行出 this.a的結果
var obj = {}; //這是一個空物件
obj.a = 123; //在空物件裡帶入 a = 123 這個值
obj.b = jaygu; //在空物件裡帶入 b = jaygu 這個函式
obj.b(); //當我們呼叫 obj.b 就印出 123
//解析一下
//你知道這裡的 this 指向得是什麼了嗎?
//當我們呼叫 obj.b(); 的時候,
//會自動去找到 obj.b = jaygu; 這個函式,
//而這個函式會執行 console.log(this.a); ,
//this 就自動去指向在 var(全域變數) obj中的 a,
//而 obj.a = 123;,
//故最後 obj.b(); 會印出 123
//所以這裡的 this 指向的就是 obj
這樣說也對!簡單來說,在這個範例中 this 就是一個指向物件實體的功能。
來個複數物件的範例:
//來個範例吧!
var getName = function(){
return pet1.petName;
};
var pet1 = {
petName: "汪汪",
getName: getName
};
var pet2 = {
petName: "貓",
getName: getName
};
console.log( pet1.getName() );
console.log( pet2.getName() );
//以上兩個例子都會回傳 "汪汪",
//因為我們讓 getName = function(){ return pet1.petName;};
接著將 this 代入看看:
var getName = function(){
return this.petName;
};
var pet1 = {
petName: "汪汪",
getName: getName
};
var pet2 = {
petName: "貓",
getName: getName
};
console.log( pet1.getName() );
//這裡會回傳 "汪汪",因為 this 指向 pet1
console.log( pet2.getName() );
//這裡會回傳 "貓",因為 this 指向 pet2
從這邊的範例我們可以很簡單的知道, this 會由於呼叫的物件不同,執行結果也不同。
在上面的範例中 this 就分別指向了 pet1 和 pet2。
記得在開頭我們提到 this 的中文就是 “這個” 嗎?
在上面的範例中,我們能將 這個(this) 視作一個代名詞,
意思就是指 我能用 這個(this) 指向我想表達的物件。
希望大家看ㄌ歡喜 & 30Days後的我覺得自己很棒!d(`・∀・)b
也請各位前輩們不吝給予批評和指教,或4給我一點鼓勵 or meme 哇ㄟ揪歡喜!
引用及參考資訊
What's THIS in JavaScript ? [上]
淺談 JavaScript 頭號難題 this:絕對不完整,但保證好懂
淺談 JavaScript 頭號難題 this:絕對不完整,但保證好懂
JavaScript深入之从ECMAScript规范解读this · Issue #7 · mqyqingfeng/Blog